<template>
	<view class="balance">
		<section class="notice">
			<u-notice-bar :text="notice_text" style="height: 70rpx;" :duration="2000"></u-notice-bar>
		</section>

	<!-- 	<section class="goods-header">
			<view class="header-left">
				<view class="shop-name">Tank Burger</view>
				<view class="distance">距离您1.2km</view>
			</view>

			<view class="radio-box">
				<view class="sliding-block">自提</view>
				<view class="radio-item">自提</view>
				<view class="radio-item">外卖</view>
			</view>
		</section>

		<section class="reserved-mobile">
			<view class="reserved-mobile-left">预留手机号</view>
			<view class="reserved-mobile-right">
				<up-input placeholder="请输入手机号" border="surround" v-model="mobile" @change="handle_mobile"></up-input>
				<u-button type="info" text="自动填写"></u-button>
			</view>
		</section> -->
		
	<!-- 	<section class="agree">
			
		</section> -->
		
		
		<view class="address" @click="handle_change_address">
			<view class="address-info">
				<view class="address-text">
					{{shipping_address || "请选择收货地址"}}
				</view>
				
				<view class="user-info">
					<span>{{shipping_name}}</span>
					<span>{{shipping_sex == "1" ? " (先生)" : " (女士)"}}</span>
					<span style="margin-left: 50rpx;">{{shipping_mobile}}</span>
				</view>
			</view>
			
			<img src="/static/address/icon_right_arrow.svg" style="width: 40rpx;height: 40rpx" alt="" />
		</view>
		
		<view class="predict-time">
			<span class="main-text">预计送达时间</span>
			<span class="sub-text">50分钟内</span>
		</view>
		
		<view class="orders-detail">
			<view class="orders-title">
				商品详情
			</view>
			
			<view class="goods-info" v-for="(_item, _index) in order_info.order_items" :key="_index">
				<view class="goods-cover">
					<img style="width: 100%;height: 100%;" :src="
						_item?.goods_name == '经典安格斯牛肉汉堡' ? '/static/goods/burger1.png' :
						_item?.goods_name == '秘制鸡腿堡' ? '/static/goods/burger2.jpg' :
						_item?.goods_name == '辣肉酱牛肉汉堡' ? '/static/goods/burger3.jpg' :
						_item?.goods_name == '猛男汉堡' ? '/static/goods/burger4.jpg' :
						_item?.goods_name == '黑凤梨' ? '/static/goods/burger5.jpg' :
						_item?.goods_name == '培根牛肉芝士堡' ? '/static/goods/burger6.png' :
						_item?.goods_name == '脆薯饼牛肉芝士堡' ? '/static/goods/burger7.png' :
						_item?.goods_name == '全麦洋葱堡' ? '/static/goods/burger8.jpg' :
						_item?.goods_name == '能量炸弹双层厚牛堡' ? '/static/goods/burger9.png' :
						_item?.goods_name == '巨无霸' ? '/static/goods/burger10.jpg' :
						_item?.goods_name == '美式粗薯条' ? '/static/goods/pellet1.png' :
						_item?.goods_name == '蒜香大薯角' ? '/static/goods/pellet2.jpg' :
						_item?.goods_name == '脆薯饼' ? '/static/goods/pellet3.png' :
						_item?.goods_name == '秘制烤鸡翅' ? '/static/goods/pellet4.jpg' :
						_item?.goods_name == '劲爆鸡米花' ? '/static/goods/pellet5.jpg' :
						_item?.goods_name == '爆汁杏鲍菇' ? '/static/goods/pellet6.png' :
						_item?.goods_name == '脆皮鸡块' ? '/static/goods/pellet7.png' :
						_item?.goods_name == '蛋挞' ? '/static/goods/pellet8.jpg' :
						_item?.goods_name == '可乐' ? '/static/goods/drink1.jpg' :
						_item?.goods_name == '雪碧' ? '/static/goods/drink2.jpg' : ''
					" alt="" />
				</view>
				
				<view class="goods-info-detail">
					<view class="goods-info-cell">
						<view class="goods-name">
							{{ _item.goods_name }}
						</view>
						<view class="goods-price">
							￥{{ _item.price }}
						</view>
					</view>
					
					<view class="goods-info-cell">
						<view class="goods-sub-name">
							{{ _item.goods_desc }}
						</view>
						<view class="goods-num">
							x {{ _item.amount }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="orders-desc">
				<span>商品小计</span>
				<span class="orders-desc-bold">￥{{order_info?.total_price || 0}}</span>
			</view>
			
			<view class="orders-desc">
				<span>包装费</span>
				<span class="orders-desc-bold">￥0</span>
			</view>
			
			<view class="orders-desc">
				<span>配送费</span>
				<span class="orders-desc-bold">免配送费</span>
			</view>
			
			
		</view>
		
		
		<view class="note">
			<view class="note-cell" style="width: 70rpx;">备注</view>
			<view class="note-cell sub-note" style="width: calc(100% - 70rpx);display: flex;justify-content: flex-end" @click="note_visible = true">
				{{ note_text != "" ? note_text : '请输入备注，偏好等其他要求' }} 
				<img src="/static/address/icon_right_arrow_999999.svg" style="width: 22rpx;height: 22rpx;margin-left: 8rpx;" alt="" />
			</view>
		</view>
		
		
		<view class="total-bottom">
			<view class="total-info">
				<view class="total-price">
					合计 ￥{{order_info?.total_price || 0}}
				</view>
				<view class="total-desc">
					免配送费10元
				</view>
			</view>
			
			<view class="total-btn">
				<up-button color="#333333" :customStyle="{height: '100%',borderRadius: 0}" @click="handle_pay_now" text="立即支付"></up-button>
			</view>
		</view>


		<u-popup :show="note_visible" @close="note_visible = false" mode="bottom">
		    <view class="note-window">
				<view class="note-textarea">
					<u--textarea v-model="note_text" :height="150" placeholder="请输入备注，偏好等其他要求" maxlength="120" count></u--textarea>
				</view>
				
				<view class="note-window-btn">
					<up-button color="#333333" :customStyle="{width: '100%',height: '100%',borderRadius: '10rpx'}" @click="handle_fill_note" text="提交"></up-button>
				</view>
		    </view>
		</u-popup>
		
		<up-action-sheet @select="handle_category_select" :actions="category_list" :show="category_visible"></up-action-sheet>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import { save_orders, save_order_items, pay_login } from "../common/api.js"
	
	const notice_text = ref("坦克汉堡温馨提示 :  您的订单将于30分钟内送达");
	const note_visible = ref(false);
	const shipping_address = ref("");	// 收货人地址
	const shipping_name = ref("");		// 收货人姓名
	const shipping_mobile = ref("");	// 收货人手机号
	const shipping_sex = ref("1");		// 收货人性别	
	
	const category_visible = ref(false)
	const category_list = ref([
		{
			name: "选择微信地址",
			color: "#333333"
		},
		{
			name: "选择我的地址",
			color: "#333333"
		},
	]);
	const handle_category_select = (obj) => {
		if(obj.name == "选择我的地址"){
			uni.navigateTo({
				url: "/pages/Tank/address/address_list?type='select'",
				animationType: "pop-in",
				animationDuration: 300
			});
		}
		if(obj.name == "选择微信地址"){
			uni.showLoading({
				title: '加载中'
			});
			uni.chooseAddress({
			  success(res) {
				uni.hideLoading()
				shipping_address.value = `${res.provinceName}${res.cityName}${res.countyName}${res.detailInfo}`
				shipping_name.value = res.userName
				shipping_mobile.value = res.telNumber
			  },
			  fail(err){
				  uni.hideLoading()
				  uni.showToast({
				  	title: JSON.stringify(err),
				  	duration: 2000,
					icon: "none"
				  });
				  console.log(err)
			  }
			})
		}
		category_visible.value = false
	}
	
	const order_info = uni.getStorageSync('order_info');
	console.log("################### 当前预订单信息 #################");
	console.log(order_info)
	
	// const goods_list = ref(new Array(2).fill({
	// 	goods_cover: "",
	// 	goods_name: "黑椒牛柳汉堡",
	// 	goods_sub_name: "番茄+凤梨",
	// 	goods_price: "42",
	// 	goods_num: "2"
	// }))

	
	const note_text = ref("");
	const handle_fill_note = () => {
		note_visible.value = false
	}
	
	
	
	// 切换地址 调起微信地址
	const handle_change_address = () => {
		category_visible.value = true;
		
		
	}
	
	// 立即支付
	const handle_pay_now = async () => {
		// 测试调起支付 start
		wx.login({
			success: res => {
				
			pay_login({
				code: res.code || "",
				order: {
					price: 1, //单位 分。只能是分
					description: `坦克汉堡订单支付${0.01}元`
				}
			}).then((RES) => {
				console.log("####################### 微信支付参数 RES #########################")
				console.log(RES)
				
				wx.requestPayment({
				    timeStamp: RES.data.data.timestamp,
				    nonceStr: RES.data.data.nonce_str,
				    package: RES.data.data.package,
				    signType: RES.data.data.signType,
				    paySign: RES.data.data.paySign,
				    success(pay_res) {
						// 支付成功 跳转支付成功页面
						console.log("########### 支付成功 res ###########")
						console.log(pay_res)
						
						
						// wx.showModal({
						// 	title: '温馨提示',
						// 	content: '支付成功!',
						// 	showCancel: false,
						// });
				    },
				    fail(err) {
						console.log('fail:' + JSON.stringify(err));
				    }
				});
				
			}).catch((err) => {
				console.log("##################### 支付失败 ####################");
				console.log(JSON.stringify(err))
			})
				
			// wx.request({
			//     url: 'https://www.xxx.asia/node/weapp/pay/login',
			//     method: 'POST',
			//     data: {
			// 		code: res.code,
			// 		order: {
			// 			price: 1, //单位 分。只能是分
			// 			description: `坦克汉堡订单支付${0.01}元`
			// 		}
			//     },
			//     success: (res1) => {
			//     wx.requestPayment({
			//         timeStamp: res1.data.data.timestamp,
			//         nonceStr: res1.data.data.nonce_str,
			//         package: res1.data.data.package,
			//         signType: res1.data.data.signType,
			//         paySign: res1.data.data.paySign,
			//         success() {
			// 			wx.showModal({
			// 				title: '温馨提示',
			// 				content: '支付成功!',
			// 				showCancel: false,
			// 			});
			//         },
			//         fail(err) {
			// 			console.log('fail:' + JSON.stringify(err));
			//         }
			//     });
			//     }
			// })
			}
		})

			
		
		// 测试调起支付 end
		
		
		
		return
		
		
		
		if(!shipping_address.value || shipping_address.value == "") {
			uni.showToast({
				title: "请先选择收货地址",
				duration: 2000,
				icon: "none"
			})
			return
		}
		
		if(!uni.getStorageSync("openid") || uni.getStorageSync("openid") == "") {
			uni.showToast({
				title: "订单创建失败，未获取到用户id，请联系管理员",
				duration: 2000,
				icon: "none"
			})
			return
		}
		
		uni.showLoading({
			title: "请求中..."
		})
		
		// 1. 生成订单
		save_orders({
			user_id: uni.getStorageSync("openid"),
			order_id: 0,
			total_amount: order_info?.total_amount,
			total_price: order_info?.total_price,
			note: note_text.value || "",
			shipping_address: shipping_address.value,
			shipping_name: shipping_name.value,
			shipping_mobile:  shipping_mobile.value,	
			shipping_sex: shipping_sex.value
			
		}).then(() => {
			let items = order_info?.order_items || []
			items.forEach(( _item ) => {
				save_order_items({
					order_item: _item
				})
			})
			uni.hideLoading();
			
			// 2. 调起支付
			
			
			
			
			
			
		})

		
		
		
	}
	
</script>

<style lang="scss">
	.note-window{
		width: 100%;
		height: 100%;
		min-height: 200rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 40rpx 30rpx 0;
		box-sizing: border-box;
		
		.note-window-btn{
			width: 90vw;
			height: 80rpx;
			margin: 30rpx auto;
		}
	}
	.balance{
		width: 100%;
		height: fit-content;
		min-height: 100vh;
		background-color: #f3f4f6;
		position: relative;
		padding-bottom: 200rpx;
		box-sizing: border-box;
		
		
		
		.notice{
			width: 100%;
			height: 70rpx;
		};
		
		.address{
			width: 100%;
			height: 160rpx;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			
			.address-info{
				width: 80%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.address-text{font-size: 32rpx;color: #333333;font-weight: 550;}
				.user-info{font-size: 26rpx;color: #333333}
			}
		}
		
		.predict-time{
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.main-text{color: #333333;}
			.sub-text{color: #FF9578}
		}
		
		.orders-detail{
			width: 100%;
			height: fit-content;
			min-height: 100rpx;
			margin-top: 20rpx;
			background-color: #fff;
			padding: 0 30rpx 20rpx 30rpx;
			box-sizing: border-box;
			
			.orders-title{
				width: 100%;
				height: 90rpx;
				font-size: 28rpx;
				color: #333333;
				margin: 0 auto;
				line-height: 90rpx;
				border-bottom: 1px solid #eee;
			}
			
			.goods-info{
				width: 100%;
				height: 110rpx;
				margin: 25rpx 0;
				display: flex;
				justify-content: space-between;
				
				.goods-cover{
					width: 110rpx;
					height: 110rpx;
					border-radius: 10rpx;
					overflow: scroll;
					background-color: #fff;
				}
				
				.goods-info-detail{
					width: calc(100% - 110rpx - 24rpx);
					height: 100%;
					display: flex;;
					flex-direction: column;;
					justify-content: space-between;
					
					.goods-info-cell{width: 100%;display: flex;justify-content: space-between;}
					
					.goods-name, .goods-price{font-size: 28rpx;color: #333333}
					.goods-price{font-weight: 550;}
					.goods-sub-name, .goods-num{font-size: 26rpx;color: #999999}
					
				}
				
			}
			
			
			.orders-desc{
			  width: 100%;
			  height: 70rpx;
			  display: flex;;
			  align-items: center;;
			  justify-content: space-between;
			  color: #333333;
			  font-size: 26rpx;
			  box-sizing: border-box;
			  .orders-desc-bold{font-weight: 550;}
			}
			
			
		}
		
		.note{
			wdith: 100%;
			min-height: 80rpx;
			height: fit-content;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.note-cell{width: fit-content;height: 100%;display: flex;align-items: center;font-size: 26rpx;}
			.sub-note{color: #999999;}
		}
		
		.total-bottom{
			position: absolute;
			left: 0;
			bottom: 0;;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			padding-left: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			
			.total-info{
				width: 50%;
				height: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;;
				flex-direction: column;
				justify-content: space-between;
				font-size: 24rpx;
				color: #999999;
				
				.total-price{font-size: 30rpx;color: #333333}
			}
			
			.total-btn{
				width: 180rpx;
				height: 100%;
			}
		}
	}
</style>